.avatar {
	border: 1px solid $avatar-border-color;
	border-radius: 50%;
	position: relative;
	
	&.size-44 {
		width: 2.75rem;
		height: 2.75rem;
	}
	
	&.size-60 {
		width: 3.875rem;
		height: 3.875rem;
	}
	
	&.size-32 {
		width: 2rem;
		height: 2rem;
	}
	
	&.badge {
		&::after {
			content: "";
			width: 11px;
			height: 11px;
			border: 1px solid #fff;
			border-radius: 6px;
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 2;
			transition: all 0.3s;
		}
		
		&.danger {
			.vue-avatar--wrapper {
				filter: grayscale(100%);
			}
			
		}
		
		&.success::after {
			background-color: $success;
		}
		
		&.secondary::after {
			background-color: #82868b;
		}
		
		&.danger::after {
			background-color: $danger;
		}
	}
}

.avator_selector {
	
	border-radius: 6px;
	width: 100%;
	cursor: pointer;
	transition: background 0.3s;
	
	.avatar {
		.check {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#ffffff, 0.7);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s;
		}
	}
	
	
	&.active {
		.avatar {
			.check {
				opacity: 1;
				visibility: visible;
			}
		}
	}
}